{% extends 'easydisAPSBundle::base_template.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/css/css-template/colorpicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/css/css-template/uniform.css') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/css/css-template/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/smoothness/jquery-ui-1.10.3.custom.css') }}" />
{% endblock %}

{% block scripts %}
    <script src="{{ asset('bundles/easydisAPS/js-template/bootstrap.min.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/bootstrap-colorpicker.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/jquery.uniform.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/select2.min.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/maruti.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/maruti.form_common.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/easydisAPS/js/jquery-1.10.2.min.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/smoothness/jquery-ui-1.10.3.custom.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/easydisAPS/js/datepickerFR.js') }}"></script>
    
    
    <script>
        $(function(){
            $('#date_debut').datepicker();
            $('#date_fin').datepicker();
        });
    </script>
{% endblock %}
    
{% block style %}
    
	table {
		overflow:hidden;
		border:1px solid #d3d3d3;
		background:#fefefe;
		width:100%;
		/*margin:5% auto 0;*/
		-moz-border-radius:5px; /* FF1+ */
		-webkit-border-radius:5px; /* Saf3-4 */
		border-radius:5px;
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	}
	
	th {padding:18px 28px 18px; text-align:center; }
        
        td {padding:5px 5px 5px; text-align:center; }
	
	th {padding-top:18px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb; color: #000;}
	
	td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
	
	tr.odd-row td {background:#f6f6f6;}
	
	td.first, th.first {text-align:left}
	
	td.last {border-right:none;}
	

	/*
        td {
		background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
		background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
	}*/
	
	tr.odd-row td {
		background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
		background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
	}
	
	th {
		background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
		background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
	}
	

	
	tr:first-child th.first {
		-moz-border-radius-topleft:5px;
		-webkit-border-top-left-radius:5px; /* Saf3-4 */
	}
	
	tr:first-child th.last {
		-moz-border-radius-topright:5px;
		-webkit-border-top-right-radius:5px; /* Saf3-4 */
	}
	
	tr:last-child td.first {
		-moz-border-radius-bottomleft:5px;
		-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
	}
	
	tr:last-child td.last {
		-moz-border-radius-bottomright:5px;
		-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
	}
        
        .larger { 
            width: 500px;
        }
        
        td.cat {
            background-color: #e7eaeb;
            font-weight: bold;
            color: #000;
        }
        
        .select_planning {
            width : 8em;
            margin: 0 0 0 0;
        }
        
{% endblock %}
        
{% block contenu %}
    
{% for flashMessage in app.session.flashbag.get('notice') %}
        {% if flashMessage %}
                <div class="notice">
                        {{ flashMessage }}
                        <br/><br/>
                </div>
        {% endif %}
{% endfor %}

<div class="row-fluid">
    <div class="span12">
            <div class="widget-box">
                <div class="widget-title">
                        <span class="icon">
                                <i class="icon-th-list"></i>
                        </span>
                        <h5>Formulaire de planification d'un groupe de salaries :</h5>
                </div>
                <div class="widget-content nopadding">
                    <form action="" method="post" class="form-horizontal">

                        <div class="control-group">
                            <label class="control-label">Date debut periode :</label>
                            <div class="controls">
                                <input type="text" name="date_debut" id="date_debut" required/>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">Date fin periode :</label>
                            <div class="controls">
                                <input type="text" name="date_fin" id="date_fin" required/>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">Effectif :</label>
                            <div class="controls">
                                <select multiple size="10" name="sals[]" required>
                                    {% for sal in list_effectif %}
                                        <option value="{{ sal.id }}">{{ sal.nom }} {{ sal.prenom }} {{ sal.prenom2 }} {{ sal.prenom3 }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>       

                        <table>
                            <thead>
                            <tr>
                                <th class="larger"></th>
                                <th>Lundi</th>
                                <th>Mardi</th>
                                <th>Mercredi</th>
                                <th>Jeudi</th>
                                <th>Vendredi</th>
                                <th>Samedi</th>
                                <th>Dimanche</th>
                            </tr>
                            </thead>
                            <tbody>
                             <form action="{{ path('easydisAPSBundle_planifier_groupe_salarie', {'gs':gs, 'date':dateDebut }) }}" method="post">   
                             <tr>
                                <td class="larger" rowspan="2">Modification :</td>
                                {% set i = 1 %}
                                {% for i in 1..7 %}
                                    <td>
                                    <select name="poste_{{i}}" size="1" class="select_planning">
                                        <option></option>
                                        {% for poste in list_postes %}
                                            <option value="{{ poste.id }}">{{ poste.lib }}</option>
                                        {% endfor %}
                                    </select>
                                    </td>
                                {% endfor %}
                            </tr>
                            <tr>
                                {% for i in 1..7 %}
                                    <td>
                                    <select name="ph_{{i}}" size="1" class="select_planning">
                                        <option></option>
                                        {% for ph in list_ph %}
                                            <option value="{{ ph.id }}">{{ ph.lib }}</option>
                                        {% endfor %}
                                    </select>
                                    </td>
                                {% endfor %}
                            </tr>
                            </tbody>
                        </table>
                    <br/>
                    <div class="control-group">
                        <label class="control-label">Comportement :</label>
                        <div class="controls">
                            <input type="radio" name="comportement" value="1" checked="checked"/> Ecraser les données precedentes
                            <input type="radio" name="comportement" value="2"/> Ajouter aux données existantes
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">Optionnel :</label>
                        <div class="controls">
                            <input type="checkbox" name="supr" value="1"/> <span style="color:#dd1b05">Simplement supprimer les données precedente</span>
                        </div>
                    </div>
                    <div class="form-actions">
                        <input type="submit" value="Confirmer" class="btn btn-warning" style="margin-left: 35px; margin-right: 10px;"/> <span style="color: #f89405; font-weight: bold;">Attention l'envoi du formulaire écrasera les données éxistantes. </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}